<template>
  <div class="risk-assessment-container">
    <!-- 左侧导航栏 -->
    <div class="left-sidebar">
      <div class="assessment-list">
        <div class="list-item active">评估列表</div>
        <div class="list-item">
          <span class="sub-item">心血管风险分层评估</span>
          <span class="high-risk-badge">高危</span>
        </div>
      </div>
    </div>
    
    <!-- 右侧评估内容 -->
    <div class="right-content">
      <!-- 顶部标签栏 -->
      <div class="top-tabs">
        <div class="tab-item active">心血管危险因素</div>
      </div>
      
      <!-- 评估表格内容 -->
      <div class="assessment-table">
        <!-- 风险分层评估 -->
        <div class="table-header">
          <h3 class="header-title">心血管风险分层评估</h3>
          <span class="risk-badge">高危</span>
        </div>
        
        <div class="table-content">
          <!-- 血压等级 -->
          <div class="form-row">
            <div class="form-label">血压等级：</div>
            <div class="form-options">
              <label class="radio-option">
                <input type="radio" name="bloodPressure" value="一级高血压" />
                <span>一级高血压</span>
                <span class="radio-note">注释：一级高血压 SBP 140-159或DBP 90-99</span>
              </label>
              <label class="radio-option">
                <input type="radio" name="bloodPressure" value="二级高血压" />
                <span>二级高血压</span>
                <span class="radio-note">注释：一级高血压 SBP 160-179或DBP 100-109</span>
              </label>
              <label class="radio-option">
                <input type="radio" name="bloodPressure" value="三级高血压" />
                <span>三级高血压</span>
                <span class="radio-note">注释：一级高血压 SBP ≥180或DBP ≥110</span>
              </label>
            </div>
          </div>
          
          <!-- 糖尿病评估 -->
          <div class="form-row">
            <div class="form-label">糖尿病评估：</div>
            <div class="status-text">未评估</div>
          </div>
          
          <!-- 血脂评估 -->
          <div class="form-row">
            <div class="form-label">血脂评估：</div>
            <div class="status-text">未评估</div>
          </div>
        </div>
        
        <!-- 血糖情况 -->
        <div class="form-section">
          <h4 class="section-title">血糖情况</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="glucose" value="糖耐量受损" />
              <span>糖耐量受损(2小时血糖7.8-11.0mmol/L)</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" name="glucose" value="空腹血糖异常" />
              <span>空腹血糖异常(6.1-6.9mmol/L)</span>
            </label>
          </div>
        </div>
        
        <!-- 年龄 -->
        <div class="form-section">
          <h4 class="section-title">年龄</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="age" value="男性>55岁" />
              <span>男性>55岁</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" name="age" value="女性>65岁" />
              <span>女性>65岁</span>
            </label>
          </div>
        </div>
        
        <!-- 生活方式 -->
        <div class="form-section">
          <h4 class="section-title">生活方式</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="lifestyle" value="吸烟" />
              <span>吸烟</span>
            </label>
          </div>
        </div>
        
        <!-- 腹部肥胖 -->
        <div class="form-section">
          <h4 class="section-title">腹部肥胖</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="obesity" value="腰围超标" />
              <span>腰围超标</span>
              <span class="checkbox-note">注释：男性≥90cm 女性≥85cm</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" name="obesity" value="肥胖" />
              <span>肥胖</span>
              <span class="checkbox-note">注释：BMI≥28kg/m²</span>
            </label>
          </div>
        </div>
        
        <!-- 家族史 -->
        <div class="form-section">
          <h4 class="section-title">家族史</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="family" value="早发心血管病家族史" />
              <span>早发心血管病家族史</span>
              <span class="checkbox-note">注释：直系亲属发病年龄男性<55岁/女性<65岁</span>
            </label>
          </div>
        </div>
        
        <!-- 血脂异常 -->
        <div class="form-section">
          <h4 class="section-title">血脂异常</h4>
          <div class="form-content">
            <label class="checkbox-option">
              <input type="checkbox" name="lipid" value="TC≥5.7mmol/L" />
              <span>TC≥5.7mmol/L(220mg/dL)</span>
              <span class="checkbox-note">注释：总胆固醇</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" name="lipid" value="LDL-C≥3.3mmol/L" />
              <span>LDL-C≥3.3mmol/L(130mg/dL)</span>
              <span class="checkbox-note">注释：低密度脂蛋白胆固醇</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" name="lipid" value="HDL-C<1.0mmol/L" />
              <span>HDL-C<1.0mmol/L(40mg/dL)</span>
              <span class="checkbox-note">注释：高密度脂蛋白胆固醇</span>
            </label>
          </div>
        </div>
        
        <!-- 分隔线 - 靶器官损害 -->
        <div class="divider-section">
          <h3 class="divider-title">靶器官损害</h3>
        </div>
        
        <!-- 靶器官损害选项 -->
        <div class="organ-damage-options">
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="左心室肥厚" />
            <span>左心室肥厚</span>
            <span class="checkbox-note">注释：1、心电图：Sokolow Lyon >38mm或Cornell >2440mm*ms；2、超声心动图：LVMI男≥124g/m²，女≥120g/m²</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="颈动脉斑块" />
            <span>颈动脉斑块</span>
            <span class="checkbox-note">注释：IMT≥0.9mm 或颈动脉粥样斑块</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="颈动脉血运速度增快" />
            <span>颈动脉血运速度增快</span>
            <span class="checkbox-note">注释：指颈动脉流速峰值≥120m/s</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="肾功能异常" />
            <span>肾功能异常</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="eGFR降低" />
            <span>eGFR降低</span>
            <span class="checkbox-note">注释：肾小球滤过率(eGFR)<60ml/min·1.73m²</span>
          </label>
          <label class="checkbox-option">
            <input type="checkbox" name="organDamage" value="血肌酐轻度升高" />
            <span>血肌酐轻度升高</span>
            <span class="checkbox-note">注释：男性115-133μmol/L(1.3-1.5mg/dl)女性107-124μmol/L(1.2-1.4mg/dl)</span>
          </label>
        </div>
        
        <!-- 分隔线 - 伴随临床疾病 -->
        <div class="divider-section">
          <h3 class="divider-title">伴随临床疾病</h3>
        </div>
        
        <!-- 临床疾病分组 -->
        <div class="clinical-disease-section">
          <!-- 脑血管病 -->
          <div class="disease-group">
            <h4 class="disease-title">脑血管病：</h4>
            <div class="disease-options">
              <label class="checkbox-option">
                <input type="checkbox" name="cerebrovascular" value="脑出血" />
                <span>脑出血</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="cerebrovascular" value="脑梗死" />
                <span>脑梗死</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="cerebrovascular" value="短暂性脑缺血发作" />
                <span>短暂性脑缺血发作</span>
              </label>
            </div>
          </div>
          
          <!-- 心脏病 -->
          <div class="disease-group">
            <h4 class="disease-title">心脏病：</h4>
            <div class="disease-options">
              <label class="checkbox-option">
                <input type="checkbox" name="heartDisease" value="心肌梗死" />
                <span>心肌梗死</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="heartDisease" value="心绞痛" />
                <span>心绞痛</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="heartDisease" value="冠状动脉血运重建史" />
                <span>冠状动脉血运重建史</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="heartDisease" value="充血性心力衰竭" />
                <span>充血性心力衰竭</span>
              </label>
            </div>
          </div>
          
          <!-- 肾脏疾病 -->
          <div class="disease-group">
            <h4 class="disease-title">肾脏疾病：</h4>
            <div class="disease-options">
              <label class="checkbox-option">
                <input type="checkbox" name="kidneyDisease" value="糖尿病肾病" />
                <span>糖尿病肾病</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="kidneyDisease" value="蛋白尿" />
                <span>蛋白尿 (≥300mg/24h)</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="kidneyDisease" value="血肌酐异常" />
                <span>血肌酐异常</span>
                <span class="checkbox-note">注释：男性>133μmol/L(1.5mg/dl)女性>124μmol/L(1.4mg/dl)</span>
              </label>
            </div>
          </div>
          
          <!-- 外周血管疾病 -->
          <div class="disease-group">
            <h4 class="disease-title">外周血管疾病：</h4>
            <div class="disease-options">
              <label class="checkbox-option">
                <input type="checkbox" name="peripheralVascular" value="间歇性跛行" />
                <span>间歇性跛行</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="peripheralVascular" value="视乳头水肿" />
                <span>视乳头水肿</span>
              </label>
            </div>
          </div>
          
          <!-- 糖尿病 -->
          <div class="disease-group">
            <h4 class="disease-title">糖尿病：</h4>
            <div class="disease-options">
              <label class="checkbox-option">
                <input type="checkbox" name="diabetes" value="空腹血糖≥7.0mmol/L" />
                <span>空腹血糖≥7.0mmol/L(126mg/dl)</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="diabetes" value="餐后2h血糖≥11.1mmol/L" />
                <span>餐后2h血糖≥11.1mmol/L(200mg/dl)</span>
              </label>
              <label class="checkbox-option">
                <input type="checkbox" name="diabetes" value="糖化血红蛋白≥6.5%" />
                <span>糖化血红蛋白≥6.5%</span>
              </label>
            </div>
          </div>
        </div>
        
        <!-- 确认按钮 -->
        <div class="button-container">
          <el-button type="primary" class="confirm-button">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 可以在这里添加组件的逻辑代码
</script>

<style scoped>
.risk-assessment-container {
  display: flex;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #ffffff;
}

/* 左侧导航栏 */
.left-sidebar {
  width: 200px;
  background-color: #f5f5f5;
  border-right: 1px solid #e8e8e8;
  padding: 10px 0;
}

.assessment-list {
  display: flex;
  flex-direction: column;
}

.list-item {
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  position: relative;
}

.list-item.active {
  background-color: #ffffff;
  color: #1890ff;
  font-weight: bold;
  border-right: 2px solid #1890ff;
}

.sub-item {
  display: flex;
  align-items: center;
}

.high-risk-badge {
  margin-left: 10px;
  background-color: #ff4d4f;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* 右侧内容区域 */
.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* 顶部标签栏 */
.top-tabs {
  border-bottom: 2px solid #1890ff;
  padding: 0 15px;
  display: flex;
  align-items: center;
  height: 50px;
}

.tab-item {
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.tab-item.active {
  color: #1890ff;
  font-weight: bold;
  border-bottom: 2px solid #1890ff;
}

/* 评估表格内容 */
.assessment-table {
  padding: 15px;
}

/* 表格头部 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.risk-badge {
  background-color: #ff4d4f;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

/* 表格内容 */
.table-content {
  margin-bottom: 20px;
}

/* 表单行 */
.form-row {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.form-label {
  width: 100px;
  font-size: 14px;
  font-weight: normal;
  margin-right: 15px;
}

.form-options {
  flex: 1;
}

.status-text {
  color: #666666;
  font-size: 14px;
}

/* 单选选项 */
.radio-option {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}

.radio-option input[type="radio"] {
  margin-right: 8px;
  margin-top: 2px;
}

.radio-note {
  color: #999999;
  font-size: 12px;
  margin-left: 5px;
}

/* 表单区块 */
.form-section {
  margin-bottom: 15px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.form-content {
  padding-left: 115px;
}

/* 复选框选项 */
.checkbox-option {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-option input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 2px;
}

.checkbox-note {
  color: #999999;
  font-size: 12px;
  margin-left: 5px;
}

/* 分隔线区块 */
.divider-section {
  margin: 20px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #1890ff;
}

.divider-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: #000000;
}

/* 靶器官损害选项 */
.organ-damage-options {
  padding-left: 115px;
  margin-bottom: 20px;
}

/* 临床疾病区块 */
.clinical-disease-section {
  margin-bottom: 30px;
}

.disease-group {
  margin-bottom: 15px;
}

.disease-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.disease-options {
  padding-left: 115px;
}

/* 按钮容器 */
.button-container {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.confirm-button {
  min-width: 80px;
  height: 32px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .risk-assessment-container {
    flex-direction: column;
  }
  
  .left-sidebar {
    width: 100%;
    height: auto;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .form-label {
    width: auto;
    margin-bottom: 5px;
  }
  
  .form-content,
  .organ-damage-options,
  .disease-options {
    padding-left: 20px;
  }
  
  .radio-option,
  .checkbox-option {
    flex-direction: column;
  }
  
  .radio-note,
  .checkbox-note {
    margin-left: 22px;
    margin-top: 2px;
  }
}
</style>